<template>
  <div class="number_box">
    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
      <el-form-item label="号码状态">
        <el-select
          class="!w-200px"
          v-model="queryParams.status"
          placeholder="请选择号码状态"
          @change="handleQuery"
          clearable
          size="small"
        >
          <el-option
            v-for="item in telephoneStatus"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="号码">
        <el-input
          size="small"
          v-model="queryParams.telephone"
          placeholder="请输入号码"
          clearable
          @keyup.enter="handleQuery"
          class="!w-200px"
        />
      </el-form-item>

      <el-form-item>
        <el-button @click="handleQuery" size="small" type="primary">
          <Icon icon="ep:search" class="mr-5px" />
          搜索
        </el-button>
        <el-button @click="resetQuery" size="small">
          <Icon icon="ep:refresh" class="mr-5px" />
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table :data="list" style="width: 100%" border height="100%">
        <el-table-column prop="telephone" label="号码" align="center"> </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <el-tag :type="statusOption[scope.row.status].type">{{
              statusOption[scope.row.status].label
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-for="item in keyList"
          :key="item.id"
          :label="item.extendName"
          :prop="item.extendCode"
          align="center"
        ></el-table-column>
        <el-table-column prop="ctime" label="创建时间" :formatter="dateFormatter" align="center">
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { taskPhonePage } from '@/api/call/aiCall/index'
import { dateFormatter } from '@/utils/formatTime'
import { RecordApi } from '@/api/call/record'

const list = ref([])
const total = ref(0)
const props = defineProps({
  activeItem: Object
})
const statusOption = {
  3000: {
    label: '准备',
    type: 'primary'
  },
  3001: {
    label: '外拨中',
    type: 'success'
  },
  3002: {
    label: '外拨结束',
    type: 'info'
  },
  3003: {
    label: '暂停',
    type: 'warning'
  }
}
const telephoneStatus = [
  {
    name: '准备',
    id: 3000
  },
  {
    name: '外拨中',
    id: 3001
  },
  {
    name: '外拨结束',
    id: 3002
  }
]
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  acsTask: '', //任务id
  telephone: '', //号码
  status: '', //状态
  ctime: '' //创建时间
})
const getList = async () => {
  const data = await taskPhonePage(queryParams)
  const flattenedData = data.list.map((item) => {
    const { extendMap, ...rest } = item
    return { ...rest, ...extendMap }
  })
  list.value = flattenedData
  total.value = data.total
}
const keyList = ref([])
const getFile = async () => {
  const data = await RecordApi.taskCalleeListNumberRule()
  keyList.value = data
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
const queryFormRef = ref(null)
/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.status = ''
  queryParams.telephone = ''
  handleQuery()
}
watch(
  () => props.activeItem,
  (val) => {
    if (val) {
      queryParams.acsTask = val.taskId
      getList()
      getFile()
    }
  },
  { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.number_box {
  height: calc(100% - 16px);
  padding-top: 16px;
}
.number_box {
  overflow-y: auto;
}
.table_box {
  height: calc(100% - 128px);
}
.el-form-item__label {
  font-size: 12px;
}
</style>
